<template>
    <div class="aptitude">
        <!-- <ul class="aptitude-tab" v-if="tabsData">
            <li v-for="p,i of tabsData" :key="i" @click="tabActiveNum=i">
                <span class="tab-title">{{p.name}}</span>
                <div v-show="tabActiveNum==i" class="tab-line"></div>
            </li>
            <li class="tabAdd">
                <img src="../assets/img/edit.png" alt="">
                <span @click="popTab">编辑</span>
            </li>
        </ul> -->
        <!-- <div style="text-align:right;">
            <span class="my-btn my-background button" @click="goEdit">发布</span>
        </div> -->
        <!-- 协议规则面板 -->
        <div class="agreement" v-show="tabActiveNum==0">
            <ul class="inp-ul">
                <li>
                    <span class="title">一级类目</span>
                    <el-select class="select1" v-model="valueLevel1" placeholder="请选择">
                        <el-option v-for="item in options1"  :key="item.id"  :label="item.categoryName"  :value="item.id"></el-option>
                    </el-select>
                </li>
                <li>
                    <span class="title" style="margin-left:20px;">二级类目</span>
                    <el-select class="select2" v-model="valueLevel2" placeholder="请选择">
                        <el-option v-for="item in options2" v-if="item.type!=2"  :key="item.id"  :label="item.categoryName"  :value="item.id"></el-option>
                    </el-select>
                </li>
                <li>
                    <span class="title" style="margin-left:20px;">三级类目</span>
                    <el-select class="select3" v-model="valueLevel3" placeholder="请选择">
                        <el-option v-for="item in options3" v-if="item.type!=2" :key="item.id"  :label="item.categoryName"  :value="item.id"></el-option>
                    </el-select>
                </li>
                <li class="tabAdd">
                    <img src="../assets/img/add.png" alt="">
                    <span @click="goAdd">发布</span>
                </li>
            </ul>
            <el-table  :data="tableData" max-height='300px'  style="width: 100%" fit >
                <el-table-column  prop="id" label="序号" width="49"></el-table-column>
                <!-- <el-table-column  prop="level1" label="一级类目"></el-table-column>
                <el-table-column  prop="level2" label="二级类目"></el-table-column>
                <el-table-column  prop="level3" label="三级类目"></el-table-column> -->
                <el-table-column  prop="name" label="名称"></el-table-column>
                <el-table-column  label="状态" width="60">
                    <template  slot-scope="scope">
                        <span v-if="scope.row.status==0">下架</span>
                        <span v-else>上架</span>
                    </template>
                </el-table-column>
                <el-table-column  prop="creationTime" label="发布时间" min-width="88">
                    <template  slot-scope="scope">
                        <span>{{format(scope.row.creationTime)}}</span>
                    </template>
                </el-table-column>
                <el-table-column  label="操作" fixed='right'>
                    <template  slot-scope="scope">
                        <el-button  v-if="scope.row.status==0" @click="shelvesClick(scope.row,1)" type="text" size="small">上架</el-button>
                        <el-button  v-else @click="shelvesClick(scope.row,0)"  type="text" size="small">下架</el-button>
                        <el-button  type="text" size="small" @click="goEdit(scope.row)">编辑</el-button>
                        <el-button  type="text" size="small" @click="goDetails(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="mask" v-show="masknum">
            <div class="content">
                <p class="content-top">
                    <span>编辑标签</span>
                    <span @click="masknum=false"><img src="../assets/img/error.png" alt=""></span>
                </p>
                <ul class="content-items">
                    <li class="item">
                        <span>序号</span>
                        <span>标签</span>
                    </li>
                    <li class="item" v-for="p,i of tabsData" :key="i" >
                        <span>{{i+1}}</span>
                        <input type="text" v-model="p.name">
                        <div class="tabAdd">
                            <img class="imghover-img" src="../assets/img/save.png" alt="">
                            <span class="imghover-span" @click="popsave(p.id,p.name)">保存</span>
                        </div>
                    </li>
                    <li class="item">
                        <span>{{tabsData.length+1}}</span>
                        <input type="text" v-model="nameValue">
                        <div class="tabAdd">
                            <img class="imghover-img" src="../assets/img/add.png" alt="">
                            <span class="imghover-span" @click="popsave(0,nameValue)">添加</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            tabActiveNum:0,//tab切换控制
            masknum:false,//遮罩层控制
            nameValue:'',//添加标签
            tabsData:[],//tab切换数据
            tableData:[],//协议数据
            valueLevel1:'',//一级类目选中值
            valueLevel2:'',//二级类目选中值
            valueLevel3:'',//三级类目选中值
            nameLevel1:'',//一级类目选中名称
            nameLevel2:'',//二级类目选中名称
            nameLevel3:'',//三级类目选中名称
            options1: [],//一级类目表
            options2:[],//二级类目表
            options3:[],//三级类目表
        }
    },
    mounted(){
        this.gettabsData()
        this.getoptions1()
    },
    methods:{
        //获取tab标签列表
        gettabsData(){
            this.axios.get('/operate/sys/lable/list').then(res=>{
                this.tabsData=res.data.List
                console.log('tabsData',this.tabsData)
            })
        },       
        //获取一级类目
        getoptions1(){
            this.tableData=[]
            this.valueLevel1=''
            this.valueLevel2=''
            this.valueLevel3=''
            this.axios.get('/operate/sys/Agreement/label?pid=0').then(res=>{
                this.options1=res.data.list
                console.log('options1-----',this.options1)
                for(var i=0;i<this.options1.length;i++){
                    if(this.options1[i].type==2){
                        this.tableData.push(this.options1[i])
                        this.options1.splice(i,1)
                    }
                }
                console.log('options1',this.options1)
                console.log('tableData',this.tableData)

            })
        },
        //获取二级类目
        getoptions2(){
            this.tableData=[]
            this.valueLevel2=''
            this.valueLevel3=''
            this.axios.get('/operate/sys/Agreement/label?pid='+this.valueLevel1).then(res=>{
                for(var i=0;i<res.data.list.length;i++){
                    if(res.data.list[i].type==2){
                        this.tableData.push(res.data.list[i])
                    }
                }
                this.options2=res.data.list
            })
        },
        //获取三级类目
        getoptions3(){
            this.tableData=[]
            this.valueLevel3=''
            this.axios.get('/operate/sys/Agreement/label?pid='+this.valueLevel2).then(res=>{
                this.options3=res.data.list
                for(var i=0;i<this.options3.length;i++){
                    if(this.options3[i].type==2){
                        this.tableData.push(this.options3[i])
                    }
                }
            })
        },
        //获取规则列表
        gettableData(){
            console.log('this.valueLevel3',this.valueLevel3)
            this.axios.get('/operate/sys/Agreement/label?pid='+this.valueLevel3).then(res=>{
                this.tableData=res.data.list
                console.log('pid',this.valueLevel3,this.tableData)
            })
        },
        //下架上架
        shelvesClick(row,n){
            var agreementEntity=row
            agreementEntity.status=n
            console.log('agreementEntity111',agreementEntity)
            this.axios({
                url:'/operate/sys/Agreement/update',
                method:'post',
                data:JSON.stringify(agreementEntity),
                headers: {'Content-Type': 'application/json;charset=UTF-8'}
            }).then(res=>{console.log(res.data)})
        },
        //弹窗
        popTab(){
            this.masknum=true
        },
        //保存标签
        popsave(id,name){
            var labelEntity={"name": name,"id": 0}
            this.axios({
                url:'/operate/sys/lable/Save',
                method:'post',
                data:JSON.stringify(labelEntity),
                headers: {'Content-Type': 'application/json;charset=UTF-8'}
            }).then(res=>{console.log(res.data)})
            this.gettabsData()
            this.nameValue=''
        },
        //跳转编辑页
        goEdit(row){
            var arr=row
            arr.nameLevel1=this.nameLevel1
            arr.nameLevel2=this.nameLevel2
            arr.nameLevel3=this.nameLevel3
            this.$router.push({path:'/index/aptitudeEdit',query:{row:arr}})
            console.log('row1234',row)
        },
        //跳转详情页
        goDetails(row){
            var arr=row
            arr.nameLevel1=this.nameLevel1
            arr.nameLevel2=this.nameLevel2
            arr.nameLevel3=this.nameLevel3
            this.$router.push({path:'/index/aptitudeDetails',query:{type:1,row:arr}})
        },
        //跳转添加页面
        goAdd(){
            this.$router.push('/index/aptitudeAdd')
        },
        //处理时间戳
        format(shijianchuo) {
            var time = new Date(shijianchuo*1000);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var f = time.getMinutes();
            var s = time.getSeconds();
            //想要什么格式可以自己改
            // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
            return y + '-' + m + '-' + d +" "+ this.add0(h)+':'+this.add0(f);
        },
        //小于10的时候，前边加0（08：08：12）
        add0(m) {
            return m < 10 ? '0' + m : m
        },
        
    },
    watch:{
        valueLevel1(){
            this.getoptions2()
            this.options1.forEach(e => {
                if(e.id==this.valueLevel1){
                    this.nameLevel1=e.categoryName
                }
            });
        },
        valueLevel2(){
            this.getoptions3()
            this.options2.forEach(e => {
                if(e.id==this.valueLevel2){
                    this.nameLevel2=e.categoryName
                }
            });
        },
        valueLevel3(){
            this.gettableData()
            this.options3.forEach(e => {
                if(e.id==this.valueLevel3){
                    this.nameLevel3=e.categoryName
                }
            });
        }
    }
}
</script>

<style scoped>
/* tab切换 */
.aptitude-tab{
    display: flex;
    margin-bottom: 6px;
    position: relative;
}
.aptitude-tab li{
    padding: 10px 30px;
    font-size: 18px;
    padding-top: 0;
}
.aptitude-tab li .tab-line{
    width: 100%;
    height: 3px;
    background: rgb(255, 120, 42);
    margin-top: 12px;
}
.aptitude-tab .tabAdd{
    position: absolute;
    right: 0;
    top: 40%;
    transform: translatey(-50%);
    padding: 0;
}
.aptitude-tab .tabAdd:hover span{
    display:inline-block;
}
.aptitude-tab .tabAdd:hover img{
    display:none;
}
.aptitude-tab .tabAdd img{
    width: 22px;
}
.aptitude-tab .tabAdd span{
    display: none;
    background: #FDD94C;
    color: #fff;
    font-size: 13px;
    padding: 2px 5px;
    border-radius: 3px;
}
/* 搜索 */
.inp-ul{
    width: 100%;
    margin-top: 10px;
    margin-bottom: 30px;
    padding-right: 100px;
    display: flex;
    position: relative;
}
.inp-ul>li{
    padding: 15px 0;
    display: flex;
    align-items: center;
}
.inp-ul>li>span:first-child{
    display: inline-block;
    text-align: right;
    width: 100px;
    margin-right: 15px;
}
.inp-ul .tabAdd{
    position: absolute;
    right: 0;
    top: 40%;
    transform: translatey(-50%);
    padding: 0;
}
.inp-ul .tabAdd:hover span{
    display:inline-block;
}
.inp-ul .tabAdd:hover img{
    display:none;
}
.inp-ul .tabAdd img{
    width: 22px;
}
.inp-ul .tabAdd span{
    display: none;
    background: #FDD94C;
    color: #fff;
    font-size: 13px;
    padding: 2px 5px;
    border-radius: 3px;
}
.button{
    margin-left:40px;
    border:0;
    padding:0 25px;
    height: 37px;
    line-height: 37px;
    margin-bottom: 20px;
}


/* 遮罩层 */
.mask{
    width: 100vw;
    height: 100vh;
    /* color: #555; */
    background: rgba(51, 51, 51, 0.692);
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
}
.mask .content{
    width: 530px;
    height: 400px;
    overflow: auto;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 30px;
    box-sizing: border-box;
}
.mask .content-top{
    display: flex;
    justify-content: space-between;
}
.mask .content-top img{
    width: 35px;
}
.content-items{
    margin: 30px;
}
.content-items .item{
    margin:20px 10px;
    position: relative;
}
.content-items .item span:first-child{
    display: inline-block;
    width: 60px;
    text-align: center;
    margin-right: 20px;
}
.mask .btn-box{
    text-align: center;
    margin: 30px;
    margin-bottom: 0;
}
.mask .btn-box span{
    display: inline-block;
    padding: 5px 30px;
    border-radius: 5px;
    background: #FDD94C;
    color: #fff;
}
.mask .tabAdd{
    position: absolute;
    right: 0;
    top: 40%;
    transform: translatey(-50%);
    padding: 0;
}
.mask .tabAdd:hover .imghover-span{
    display:inline-block;
}
.mask .tabAdd:hover .imghover-img{
    display:none;
}
.mask .tabAdd .imghover-img{
    width: 20px;
}
.mask .tabAdd .imghover-span{
    display: none;
    background: #FDD94C;
    color: #fff;
    font-size: 13px;
    padding: 3px 6px;
    border-radius: 3px;
}
</style>